﻿function drawProcessNode(ctx, startX, startY, stateColor, Title, state, borderWidth) {
    //绘制圆角边框
    ctx.strokeStyle = 'rgba(222, 225, 231, 1)';
    ctx.beginPath();
    ctx.arc(startX + 10, startY - 35, 10, -Math.PI / 2, Math.PI, true);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(startX + 10, startY - 45);
    ctx.lineTo(startX + 110, startY - 45);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(startX + 110, startY - 35, 10, -Math.PI / 2, 0, false);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(startX + borderWidth, startY - 35)
    ctx.lineTo(startX + borderWidth, startY + 35)
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(startX + 110, startY + 35, 10, Math.PI / 2, 0, true);
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath();
    ctx.moveTo(startX + 110, startY + 45);
    ctx.lineTo(startX + 10, startY + 45);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(startX + 10, startY + 35, 10, Math.PI, Math.PI / 2, true);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(startX, startY + 35);
    ctx.lineTo(startX, startY - 35);
    ctx.stroke();
    ctx.closePath();

    //绘制填充圆形 头像背景
    ctx.beginPath();
    ctx.arc(startX + 20, startY - 20, 12, 0, Math.PI * 2, true)
    ctx.fillStyle = stateColor;
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(startX + 20, startY - 24, 4, 0, Math.PI * 2, true)
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(startX + 20, startY - 8, 10, 0, Math.PI / 2, true)
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.arc(startX + 20, startY - 20, 12, 0, Math.PI * 2, true)
    ctx.strokeStyle = stateColor;
    ctx.stroke();
    ctx.closePath();

    //填充文字
    ctx.fillStyle = "rgba(66, 76, 87, 1)";
    ctx.font = "14px serif";
    ctx.fillText(Title, startX + 40, startY - 18);

    ctx.fillStyle = "rgba(66, 76, 87, 1)";
    ctx.font = "14px serif";
    ctx.fillText(state, startX + 40, startY + 20);
}

//绘制纵线
function drawVerticalLine(ctx, startX, startY, endX, endY, color) {
    ctx.beginPath();
    ctx.strokeStyle = color
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
}

//绘制横线
function drawHorizontalLine(ctx, startX, startY, endX, endY, color) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
}
//绘制右箭头
function drawRightArrow(ctx, startX, startY, color) {
    ctx.beginPath();
    ctx.moveTo(startX + 5, startY);
    ctx.lineTo(startX, startY + 5);
    ctx.lineTo(startX, startY - 5);
    ctx.fillStyle = color;
    ctx.fill();
}
//绘制圆点
function drawDot(ctx, centerX, centerY, rediuce, color) {
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.fillStyle = color;
    ctx.arc(centerX, centerY, rediuce, 0, Math.PI * 2, true)
    ctx.fill()
}
 
       //绘制流程结束节点
function drawNullNode(ctx, startX, startY, state, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(startX + 10, startY - 15, 10, -Math.PI / 2, Math.PI, true);
    ctx.lineTo(startX + 10, startY - 25);
    ctx.lineTo(startX + 40, startY - 25);
    ctx.arc(startX + 40, startY - 15, 10, -Math.PI / 2, 0, false);
    ctx.lineTo(startX + 50, startY - 15)
    ctx.lineTo(startX + 50, startY + 15)
    ctx.arc(startX + 40, startY + 15, 10, Math.PI / 2, 0, true);
    ctx.lineTo(startX + 40, startY + 25);
    ctx.lineTo(startX + 10, startY + 25);
    ctx.arc(startX + 10, startY + 15, 10, Math.PI, Math.PI / 2, true);
    ctx.lineTo(startX, startY + 15);
    ctx.lineTo(startX, startY - 15);
    ctx.fill();
    ctx.closePath();
    ctx.fillStyle = "rgba(66, 76, 87, 1)"
    ctx.font = "12px"
    ctx.fillText(state, startX + 10, startY + 5)
}